<template>
    <view
        class="item-info"
        :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''"
    >
        <view class="cate-content">
            <view class="item-fixed-top">
                <view class="title">{{ title }}</view>
                <view class="close" @click="close">
                    <image
                        src="../../static/images/close.png"
                        mode="scaleToFill"
                    ></image>
                </view>
            </view>
            <div class="form-box">
                <el-form ref="form" :model="form">
                    <el-form-item>
                        <el-select
                            v-model="form.region1"
                            class="select-w"
                            @change="screenFun"
                        >
                            <el-option
                                :label="item.title"
                                :value="item.groupid"
                                :key="item.groupid"
                                v-for="item in option_data1"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select
                            v-model="form.region2"
                            class="select-w"
                            @change="screenFun"
                        >
                            <el-option
                                :label="item.title"
                                :value="item.id"
                                :key="item.id"
                                v-for="item in option_data2"
                            ></el-option>
                        </el-select> </el-form-item
                ></el-form>
            </div>
            <div class="details-all">
                <div class="details-top">
                    <div class="details-num">
                        <div class="title">销售额</div>
                        <div class="num">{{ countAll.sell_amount }}</div>
                    </div>
                    <div class="details-num">
                        <div class="title">利润额</div>
                        <div class="num">{{ countAll.sell_amount }}</div>
                    </div>
                </div>
                <div class="details-bottom">
                    <div class="details-num">
                        <div class="title">进货额</div>
                        <div class="num">{{ countAll.sell_amount }}</div>
                    </div>
                    <div class="details-num">
                        <div class="title">销售量</div>
                        <div class="num">{{ countAll.sell_amount }}</div>
                    </div>
                    <div class="details-num">
                        <div class="title">进货量</div>
                        <div class="num">{{ countAll.sell_amount }}</div>
                    </div>
                </div>
            </div>
            <div class="list-box comm-list" v-infinite-scroll="loadFun">
                <div
                    class="list-row"
                    v-for="(item, index) in data_list"
                    :key="index"
                    @click="getloadSaleData(item)"
                >
                    <div class="img-box"><img :src="item.avatar" /></div>
                    <div class="info-box">
                        <div class="title">{{ item.name }}</div>
                        <div class="num-box">
                            <div class="num-txt">
                                <div class="num">
                                    卖量 {{ item.sell_amount }}
                                </div>
                                <div class="num">
                                    买量 {{ item.sell_amount }}
                                </div>
                            </div>
                            <div class="num-txt">
                                <div class="num">
                                    卖出 {{ item.sell_amount }}
                                </div>
                                <div class="num">
                                    买进 {{ item.sell_amount }}
                                </div>
                            </div>
                            <div class="num-txt">
                                <div class="num">
                                    利润 {{ item.sell_amount }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </view>
    </view>
</template>

<script>
export default {
    props: [],
    components: {},
    computed: {},
    data() {
        return {
            openShow: 0,
            title: "",
            form: {
                region1: "",
                region2: "all",
            },
            option_data1: [
                {
                    groupid: "",
                    title: "全部团队",
                },
            ],
            option_data2: [],
            data_list: [],
            countAll: {},
            day: "",
        };
    },
    created() {},
    mounted() {},
    methods: {
        show(type, data) {
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.openShow = 2;
            setTimeout(() => {
                this.openShow = state;
            }, timer);
            if (!type) return;
            this.title = data.title;
            if (this.option_data1.length == 1) {
                this.option_data1 = this.option_data1.concat(data.group_ls);
            }
            if (this.option_data2.length == 0) {
                this.option_data2 = this.option_data2.concat(data.paytype_ls);
            }
            this.data_list = data.data_list;
            this.countAll = data.count_all;
            this.option_data2.map((v) => {
                if (v.id === "all") {
                    v.title = "全部支付方式";
                }
            });
            this.day = data.day;
        },
        close() {
            this.show();
        },
        getloadSaleData(item) {
            let obj = Object.assign({ day: this.day }, item);
            this.$emit("getloadSaleData", obj);
        },
        loadFun() {
            this.$emit("loadFun");
        },
        screenFun() {
            this.$emit("screenFun", this.form);
        },
    },
};
</script>

<style lang="scss" scoped >
.item-info {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    transition: 0.3s;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .cate-content {
        border-radius: 6px;
        overflow: hidden;
        width: 500px;
        height: 600px;
        background: #f8f8f8;
        float: right;
        transform: translateY(-100%);
        transition: 0.3s;
        position: relative;
        .item-fixed-top {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-bottom: 1px solid #ececec;
            .title {
                font-size: 18px;
                font-weight: bold;
            }
            .close {
                position: absolute;
                right: 5px;
                top: 12px;
                width: 32px;
                height: 32px;
                text-align: center;
                cursor: pointer;
                image {
                    width: 14px;
                    height: 14px;
                }
            }
        }
        ::v-deep.form-box {
            padding: 10px;
            .el-form {
                display: flex;
                .el-form-item {
                    margin: 0;
                }
                .select-w {
                    width: 150px;
                    margin-right: 10px;
                }
            }
        }
        .details-all {
            padding: 5px 10px;
            border-bottom: 1px solid #ededed;
            .details-top {
                display: flex;
                .details-num {
                    font-size: 14px;
                    margin-right: 50px;
                    .num {
                        font-size: 22px;
                        color: #3388ff;
                        font-weight: bold;
                    }
                }
            }
            .details-bottom {
                display: flex;
                .details-num {
                    font-size: 14px;
                    margin-right: 20px;
                }
            }
        }
        .list-box {
            height: calc(100% - 236px);
            .list-row {
                display: flex;
                cursor: pointer;
                margin-bottom: 10px;
                padding: 10px;
                &:last-child {
                    margin: 0;
                }
                &:hover {
                    background: #f3efef;
                }

                .img-box {
                    width: 80px;
                    height: 80px;
                    border-radius: 5px;
                    overflow: hidden;
                    background: #ededed;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .info-box {
                    padding-left: 10px;
                    width: calc(100% - 90px);
                    .title {
                        margin-bottom: 10px;
                        font-size: 14px;
                    }
                    .num-box {
                        display: flex;
                        .num-txt {
                            padding-right: 10px;
                            flex: 1;
                            .num {
                            }
                        }
                    }
                }
            }
        }
    }

    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.3);
        .cate-content {
            transform: translateY(0);
        }
    }
}
</style>
